{% extends "base_generic.html" %}

{% block title %}Local Library Home{% endblock %}

{% block header %}Welcome to Local Library{% endblock %}

{% block content %}
<!-- Banner -->
<div class="banner p-4 mb-4 rounded-3 shadow-sm text-center" style="background: linear-gradient(90deg, #43cea2 0%, #185a9d 100%); color: #fff;">
  <h1 class="display-4 font-weight-bold mb-3 text-center">Welcome to 梅梅的 Library</h1>
  <p class="lead">Discover, borrow, and review your favorite books!</p>
  <form class="d-flex justify-content-center mt-3">
    <input class="form-control w-50" type="search" placeholder="Search books, authors..." aria-label="Search">
    <button class="btn btn-light ms-2" type="submit"><i class="fas fa-search"></i></button>
  </form>
</div>
<!-- 统计卡片 -->
<div class="row g-4 mb-4">
  <div class="col-md-3">
    <div class="card stat-card text-center border-0 shadow">
      <div class="card-body">
        <div class="display-6 text-primary"><i class="fas fa-book"></i></div>
        <h5 class="card-title mt-2">Books</h5>
        <p class="card-text fs-4 fw-bold">{{ num_books }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card text-center border-0 shadow">
      <div class="card-body">
        <div class="display-6 text-success"><i class="fas fa-copy"></i></div>
        <h5 class="card-title mt-2">Copies</h5>
        <p class="card-text fs-4 fw-bold">{{ num_instances }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card text-center border-0 shadow">
      <div class="card-body">
        <div class="display-6 text-warning"><i class="fas fa-check-circle"></i></div>
        <h5 class="card-title mt-2">Available</h5>
        <p class="card-text fs-4 fw-bold">{{ num_instances_available }}</p>
      </div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="card stat-card text-center border-0 shadow">
      <div class="card-body">
        <div class="display-6 text-danger"><i class="fas fa-users"></i></div>
        <h5 class="card-title mt-2">Authors</h5>
        <p class="card-text fs-4 fw-bold">{{ num_authors }}</p>
      </div>
    </div>
  </div>
</div>
<!-- 热门图书横向滚动卡片 -->
<div class="card border-0 shadow mb-4">
  <div class="card-header bg-white fw-bold fs-5">
    <i class="fas fa-fire text-danger"></i> Popular Books
  </div>
  <div class="card-body d-flex flex-wrap gap-3 justify-content-start popular-books-row">
    {% for book in popular_books %}
    <div class="book-card-modern card p-2 text-center">
      {% if book.cover_url %}
        <img src="{{ book.cover_url }}" class="book-cover-img mb-2" alt="{{ book.title }}">
      {% else %}
        <!-- SVG 占位图 -->
        <div class="book-cover-placeholder mb-2">
          <svg width="80" height="110" viewBox="0 0 80 110" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect width="80" height="110" rx="12" fill="#e3f2fd"/>
            <text x="50%" y="55%" text-anchor="middle" fill="#90caf9" font-size="16" font-family="Arial" dy=".3em">No Cover</text>
          </svg>
        </div>
      {% endif %}
      <div class="fw-semibold book-title mb-1" style="font-size:1.1em;">{{ book.title }}</div>
      <div class="text-muted book-author" style="font-size:0.95em;">{{ book.author }}</div>
    </div>
    {% endfor %}
  </div>
</div>
<!-- AI推荐卡片 -->
<div class="row g-4 mb-4">
  <div class="col-md-8">
    <div class="card border-0 shadow mb-4">
      <div class="card-body text-center">
        <h5 class="card-title"><i class="fas fa-robot text-info"></i> AI Recommendations</h5>
        {% if ai_recommendations %}
          {% for book in ai_recommendations %}
          <div class="card mb-3">
            <div class="card-body">
              <h6 class="card-subtitle mb-2 text-muted">Recommended for you</h6>
              <h5 class="card-title">{{ book.title }}</h5>
              <p class="card-text">{{ book.summary|truncatewords:30 }}</p>
              <a href="{{ book.get_absolute_url }}" class="btn btn-primary">View Details</a>
            </div>
          </div>
          {% endfor %}
        {% else %}
          <p>Complete your profile and borrow some books to get personalized recommendations!</p>
        {% endif %}
      </div>
    </div>
  </div>
  <!-- 快捷操作卡片 -->
  <div class="col-md-4">
    <div class="card border-0 shadow mb-4">
      <div class="card-body text-center">
        <h5 class="card-title"><i class="fas fa-bolt text-warning"></i> Quick Actions</h5>
        <div class="d-grid gap-2">
          <a href="{% url 'books' %}" class="btn btn-primary mb-2"><i class="fas fa-search"></i> Browse Books</a>
          <a href="{% url 'my-borrowed' %}" class="btn btn-secondary mb-2"><i class="fas fa-bookmark"></i> My Borrowed Books</a>
          <a href="{% url 'ai-chat' %}" class="btn btn-info"><i class="fas fa-robot"></i> Chat with AI</a>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
